<ion-header>

  <ion-navbar>
    <ion-title>账户设置</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list class="item-list">
    <ion-item-divider><span class="color-gray-light">用户信息</span></ion-item-divider>

    <!--真名-->
    <ion-item *ngIf="!editConfig.realName">
      <ion-icon name="md-person" item-start></ion-icon>
      <div [ngClass]="{'color-gray font-small':!userInfo?.realName}">真名：{{userInfo?.realName || '[未设置]'}}</div>
      <button ion-button clear item-end (click)="editConfig.realName = true">
        <ion-icon name="ios-create-outline"></ion-icon>
      </button>
    </ion-item>
    <!--修改真名-->
    <ion-item *ngIf="editConfig.realName" class="setting-input">
      <ion-icon name="md-person" item-start></ion-icon>
      <ion-input placeholder="请输入姓名" #myRealName></ion-input>
      <div item-end>
        <button ion-button clear (click)="editConfig.realName = false">
          <ion-icon name="md-close" class="color-red"></ion-icon>
        </button>
        <button ion-button clear (click)="updateRealName(myRealName.value)">
          <ion-icon name="md-checkmark" class="color-success"></ion-icon>
        </button>
      </div>
    </ion-item>

    <!--昵称-->
    <ion-item *ngIf="!editConfig.nickName">
      <i class="iconfont icon icon-nicheng" item-start></i>
      <div [ngClass]="{'color-gray font-small':!userInfo?.nickName}">{{userInfo?.nickName || '[未设置]'}}</div>
      <button ion-button clear item-end (click)="editConfig.nickName = true">
        <ion-icon name="ios-create-outline"></ion-icon>
      </button>
    </ion-item>
    <!--修改昵称-->
    <ion-item *ngIf="editConfig.nickName" class="setting-input">
      <i class="iconfont icon icon-nicheng" item-start></i>
      <ion-input placeholder="请输入昵称" #myNickName></ion-input>
      <div item-end>
        <button ion-button clear (click)="editConfig.nickName = false">
          <ion-icon name="md-close" class="color-red"></ion-icon>
        </button>
        <button ion-button clear (click)="updateNickName(myNickName.value)">
          <ion-icon name="md-checkmark" class="color-success"></ion-icon>
        </button>
      </div>
    </ion-item>

    <!--手机号-->
    <ion-item *ngIf="!editConfig.phone">
      <ion-icon name="md-phone-portrait" item-start></ion-icon>
      <div [ngClass]="{'color-gray font-small':!userInfo?.phone}">{{userInfo?.phone || '[未设置]'}}</div>
      <button ion-button clear item-end (click)="editConfig.phone = true">
        <ion-icon name="ios-create-outline"></ion-icon>
      </button>
    </ion-item>
    <!--修改手机号-->
    <ion-item *ngIf="editConfig.phone" class="setting-input">
      <ion-icon name="md-phone-portrait" item-start></ion-icon>
      <ion-input placeholder="请输入手机号" #myPhone></ion-input>
      <div item-end>
        <button ion-button clear (click)="editConfig.phone = false">
          <ion-icon name="md-close" class="color-red"></ion-icon>
        </button>
        <button ion-button clear (click)="updatePhone(myPhone.value)">
          <ion-icon name="md-checkmark" class="color-success"></ion-icon>
        </button>
      </div>
    </ion-item>

    <!--身份证号-->
    <ion-item *ngIf="!editConfig.idCard">
      <i class="iconfont icon icon-credentials_icon" item-start></i>
      <div [ngClass]="{'color-gray font-small':!userInfo?.idCard}">{{(userInfo?.idCard | spliceStr: [6,4]) || '[未设置]'}}
      </div>
      <button ion-button clear item-end (click)="editConfig.idCard = true">
        <ion-icon name="ios-create-outline"></ion-icon>
      </button>
    </ion-item>
    <!--修改身份证号-->
    <ion-item *ngIf="editConfig.idCard" class="setting-input">
      <i class="iconfont icon icon-credentials_icon" item-start></i>
      <ion-input placeholder="请输入身份证号" #myIdCard></ion-input>
      <div item-end>
        <button ion-button clear (click)="editConfig.idCard = false">
          <ion-icon name="md-close" class="color-red"></ion-icon>
        </button>
        <button ion-button clear (click)="updateIdCard(myIdCard.value)">
          <ion-icon name="md-checkmark" class="color-success"></ion-icon>
        </button>
      </div>
    </ion-item>

    <!--支付宝-->
    <ion-item *ngIf="!editConfig.alipay">
      <i class="iconfont icon icon-zhifubao" item-start></i>
      <div [ngClass]="{'color-gray font-small':!userInfo?.alipay}">{{userInfo?.alipay || '[未设置]'}}</div>
      <button ion-button clear item-end (click)="editConfig.alipay = true">
        <ion-icon name="ios-create-outline"></ion-icon>
      </button>
    </ion-item>
    <!--修改支付宝-->
    <ion-item *ngIf="editConfig.alipay" class="setting-input">
      <i class="iconfont icon icon-zhifubao" item-start></i>
      <ion-input placeholder="请输入支付宝账号" #myAlipay></ion-input>
      <div item-end>
        <button ion-button clear (click)="editConfig.alipay = false">
          <ion-icon name="md-close" class="color-red"></ion-icon>
        </button>
        <button ion-button clear (click)="updateAlipay(myAlipay.value)">
          <ion-icon name="md-checkmark" class="color-success"></ion-icon>
        </button>
      </div>
    </ion-item>

    <!--微信-->
    <ion-item *ngIf="!editConfig.wechat">
      <i class="iconfont icon icon-weixin" item-start></i>
      <div [ngClass]="{'color-gray font-small':!userInfo?.wechat}">{{userInfo?.wechat || '[未设置]'}}</div>
      <button ion-button clear item-end (click)="editConfig.wechat = true">
        <ion-icon name="ios-create-outline"></ion-icon>
      </button>
    </ion-item>
    <!--修改微信-->
    <ion-item *ngIf="editConfig.wechat" class="setting-input">
      <i class="iconfont icon icon-weixin" item-start></i>
      <ion-input placeholder="请输入微信账号" #myWechat></ion-input>
      <div item-end>
        <button ion-button clear (click)="editConfig.wechat = false">
          <ion-icon name="md-close" class="color-red"></ion-icon>
        </button>
        <button ion-button clear (click)="updateWechat(myWechat.value)">
          <ion-icon name="md-checkmark" class="color-success"></ion-icon>
        </button>
      </div>
    </ion-item>


    <button ion-item [navPush]="'BankCardsPage'">
      <ion-icon name="ios-card" item-start></ion-icon>
      我的银行卡
    </button>
    <button ion-item (click)="updatePassword()">
      <ion-icon name="unlock" item-start></ion-icon>
      修改密码
    </button>
    <button ion-item (click)="updatePinPassword()">
      <ion-icon name="unlock" item-start></ion-icon>
      修改支付密码
    </button>
  </ion-list>
  <ion-list class="item-list">
    <button ion-item (click)="logout($event)">
      <ion-icon name="log-out" item-start></ion-icon>
      退出登录
    </button>
  </ion-list>
</ion-content>
